<template>
  <div>
    <el-form style="text-align: center;" :inline="true" class="demo-form-inline">
      <el-form-item label="价格">
        <el-input-number v-model="price" :step="step" step-strictly></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onplay">竞价</el-button>
      </el-form-item>
    </el-form>

    <el-table
    :header-cell-style="(function (){return 'text-align:center'})"
    :cell-style="(function (){return 'text-align:center'})"
    :data="itemList"
    style="width: 100%">
      <el-table-column prop="nickname" label="竞买人" min-width="50%">
      </el-table-column>
      <el-table-column prop="price" label="价格" min-width="50%">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'Work3',
    data() {
      return {
        websock: null,
        itemList: [],

        //这几个值从数据库获取
        price: 1000,
        step: 500,
        auctionId: 99
      }
    },
    created() {
      this.initWebSocket();
    },
    mounted() {
      //this.initWebSocket();
    },
    destroyed: function() { // 离开页面生命周期函数
      this.websock.close()
    },
    methods: {
      //初始化WebSocket
      initWebSocket: function() {
        if(this.$cookies.get('token') == null || this.auctionId == '' ){
          this.$alert("请重新登录!")
          location.href="/Login"
        }

        let url = 'ws://127.0.0.1:8087/' + 'webSocket/' + this.auctionId +  '/' + this.$cookies.get('token')
        
        this.websock = new WebSocket(url);
        this.websock.onopen = this.websocketOnopen;
        this.websock.onerror = this.websocketOnerror;
        this.websock.onmessage = this.websocketOnmessage;
        this.websock.onclose = this.websocketOnclose;
      },

      //连接成功
      websocketOnopen: function() {
        console.log("WebSocket连接成功");
        //心跳检测重置
        //this.heartCheck.reset().start();
      },

      //连接错误
      websocketOnerror: function(e) {
        console.log("WebSocket连接发生错误");
        this.reconnect();
      },

      //监听后端消息
      websocketOnmessage: function(e) {
        console.log("-----接收消息-------");
        console.log(e.data);
        this.itemList = JSON.parse(e.data)
        this.price = this.itemList[0].price + this.step
        console.log(this.itemList)
      },

      //关闭连接
      websocketOnclose: function(e) {
        console.log("WebSocket连接关闭 (" + e.code + ")");
      },

      //向后端发送数据
      websocketSend(text) {
        try {
          this.websock.send(text);
        } catch (err) {
          console.log(err);
        }
      },

      //重新连接
      reconnect() {
        var that = this;
        if (that.lockReconnect) return;
        that.lockReconnect = true;
        //没连接上会一直重连，设置延迟避免请求过多
        setTimeout(function() {
          console.info("尝试重连...");
          that.initWebSocket();
          that.lockReconnect = false;
        }, 5000);
      },


      onplay() {
        if (this.price != '') {
          //调用axios，添加数据库竞价信息

          //在axios的回调函数中添加下列代码，
          //向后端发送信息,注意项目需要在后端再查询一遍记录，
          //然后发送给每个连接着该竞拍室的session
          let item = JSON.stringify({
            nickname: this.$cookies.get('nickname'),
            price: this.price
          })
          this.websocketSend(item);

        } else {
          this.$alert("请输入金额!")
        }
      }

    },

  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
